<template>
  <el-row class="page-product">
    <el-col :span="19">
      <crumbs :keyword="keyword" />
      <category
        :types="types"
        :areas="areas"
      />
      <list :list="list" />
    </el-col>
    <el-col :span="5">
      <amap
        v-if="point.length"
        :width="380"
        :height="290"
        :point="point"
        :flag="flag"
      />
    </el-col>
  </el-row>
</template>

<script>
import cookies from 'vue-cookies'
import Crumbs from '@/components/products/crumbs.vue'
import Category from '@/components/products/category.vue'
import List from '@/components/products/list.vue'
import Amap from '@/components/public/map.vue'
export default {
  components: {
    Crumbs,
    Category,
    List,
    Amap
  },
  /* eslint-disable prefer-const */
  data () {
    return {
      // 地址栏中参数
      keyword: '',
      // 类型
      types: [],
      // 地区
      areas: [],
      // 商品列表数据
      list: [],
      // 商品定位的经纬度
      point: [],
      scrollTop: 0,
      flag: false
    }
  },
  watch: {
    scrollTop (newTop) {
      // console.log(newTop)
      // eslint-disable-next-line eqeqeq
      // 监听页面滚动变化
      for (let i = 1; i < this.list.length; i++) {
        if (newTop >= 366 + i * 200 && newTop <= 366 + (i + 1) * 200) {
          this.point = (this.list[i].location || '').split(',')
        }
        if (document.documentElement.scrollTop +
      document.documentElement.clientHeight >=
     document.body.scrollHeight) {
          this.point = (this.list[this.list.length - 1].location || '').split(',')
        }
      }
    }
  },
  mounted () {
    // 获取数据
    this.getData()
    // 给页面添加滚动事件
    window.addEventListener('scroll', this.getScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.getScroll)
  },
  methods: {
    async getData () {
      // 获取地址栏中传递过来的参数
      this.keyword = decodeURIComponent(location.href.split('?')[1].split('=')[1])
      // 获取城市
      const city = cookies.get('city') ? cookies.get('city') : this.$store.state.geo.position.city
      let { status, data: { count, pois } } = await this.$axios.get('/search/resultsByKeywords', {
        params: {
          keyword: this.keyword,
          city
        }
      })
      let { status: status2, data: { areas, types } } = await this.$axios.get('/categroy/crumbs', {
        params: {
          city
        }
      })
      if (status === 200 && count > 0 && status2 === 200) {
      // 商品列表数据
        this.list = pois.filter(item => item.photos.length).map((item) => {
          return {
            type: item.type,
            img: item.photos[0].url,
            name: item.name,
            comment: Math.floor(Math.random() * 10000),
            rate: Number(item.biz_ext.rating),
            price: Number(item.biz_ext.cost),
            scene: item.type.split(';')[0],
            tel: item.tel,
            status: '可订明日',
            location: item.location,
            module: item.type.split(';')[0],
            address: item.address
          }
        })
        // 地区
        this.areas = areas.filter(item => item.type !== '').slice(0, 6)
        // 类型
        this.types = types.filter(item => item.type !== '').slice(0, 6)
        // 对应商品经纬度
        this.point = (pois.find(item => item.location).location || '').split(',')
      }
    },
    // 监听滚动
    getScroll () {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (!!document.documentElement.scrollTop && document.documentElement.scrollTop >= 255) {
        this.flag = true
      } else {
        this.flag = false
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/css/products/index.scss';
// .map_absolute {
//     position: fixed;
//     top: -57px;
//     right: 208px;
//     transform: translateZ(0px);
//     background-color: transparent;
//     box-shadow: 0 2px 2px #ccc;
//     overflow: hidden;
// }
</style>
